<template>
	<view>
		<image src="../../static/bei3.png" class="bei"></image>
		<view class="u-p-r" style="z-index: 2;">
			<u-navbar title="运动项目" placeholder bg-color="transparent" :auto-back="true">
			
			</u-navbar>
			<view class="u-flex u-flex-between" style="padding: 0 68rpx 0 50rpx;    position: relative;">
				<view>
	
					<view  @click="$u.route('/pages/shop/score')" class="u-f-24 u-bg-fff" style="color: #AC0800;border-radius: 30rpx 0rpx 30rpx 0rpx;width: 180rpx;height: 48rpx;line-height: 48rpx;text-align: center;">积分兑换好礼</view>
					<u-gap height="10rpx"></u-gap>
					<view style="font-size:56rpx;" class="u-c-fff u-bold">熊戰擂台</view>
					<u-gap height="20rpx"></u-gap>
					<view class="u-f-26 u-c-fff u-flex">
						<view>俱乐部</view>
						<view class="u-m-l-20">场地预约</view>
						<view class="u-m-l-20">对战历史</view>
					</view>
				</view>
				<image src="/static/Group_269.png" style="width: 225rpx;height: 257rpx;"></image>
			</view>
			
			<view class="u-p-20" style="margin-top: -68rpx;    z-index: 99;    position: relative;">
				<view class="u-p-30 u-bg-fff " style="width: 710rpx;box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(0,0,0,0.06);border-radius: 20rpx;position: relative;">
					<view class="u-flex u-flex-between">
						<view class="u-flex" @click="go('/pages/member/setUp', true)">
							<image :src="user.avatar" style="width: 145rpx;height: 145rpx;border-radius: 50%;"></image>
							<view class="u-m-l-24">
								<view class="u-flex">
									<view class="u-f-32 u-bold">{{user.nickname ||''}}</view>
									<view class="u-m-l-30 u-f-20 u-bold" style="color: #EA4D44; padding: 0 10rpx; height: 30rpx;text-align: center;line-height: 30rpx ;border-radius: 25% ;background: rgba(234,77,68,0.1);" v-if="user.level">{{user.level}}</view>
								</view>
								<view class="u-flex u-f-24 u-m-t-12">
									<view style="color:#A0A4AD">胜：</view>
									<view class="u-f-28 u-bold u-m-r-30">{{user.down_status[1] || 0}}</view>
									<view  style="color:#A0A4AD">和：</view>
									<view  class="u-f-28 u-bold u-m-r-30">{{user.down_status[2] || 0}}</view>
									<view  style="color:#A0A4AD">败：</view>
									<view  class="u-f-28 u-bold">{{user.down_status[0] || 0}}</view>
								</view>
								<view class="u-flex-y-center u-m-t-16" @click.stop="$u.route('/pages/member/score')">
									<view class="u-f-28">积分：{{user.score || 0}}</view>
									<image src="/static/right.png" style="width: 20rpx;height: 20rpx;margin-left: 10rpx;"></image>
								</view>
							</view>
						</view>
						<view class="u-p-2 u-flex" style="flex-direction: column;align-items: center;" @click.stop="showQrcode=true">
							<image src="/static/qrcode.png" style="width: 44rpx;height: 44rpx;"></image>
							<u-gap height="10rpx"></u-gap>
							<view class="u-f-26">二维码</view>
						</view>
					</view>
						<u-gap height="20rpx"></u-gap>
						<!-- <view style="width: 650rpx;height: 20rpx;background: #FDEEED;border-radius: 10rpx;">
							<view style="width: 460rpx;height: 20rpx; border-radius: 10rpx; background: linear-gradient( 90deg, #F69792 0%, #EA4D44 100%);">
								
							</view>
						</view> -->
						<view class="u-flex-1">
											<u-line-progress :percentage="user.exp_rate" activeColor="#EA4D44" :showText="false" inactive-color="#FFE4E4"></u-line-progress>
										</view>
							<u-gap height="10rpx"></u-gap>
							<view class="u-f-26">当前积分{{user.exp || 0}}<text >，距下一级还需{{user.next_diff_exp || 0}}积分</text></view>
					
			
					<view class="login" v-if="!user.mobile">
						请先<text @click="$u.route('/pages/login/login')">登录</text>
					</view>
				</view>
				
			</view>
			
						<u-gap height="20rpx"></u-gap>
			<view class="u-p-30">
				<view class="u-f-32 u-bold">全部功能</view>
				<u-gap height="40rpx"></u-gap>
				<view class="grid">
								
					<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"
						@click="$u.route('/pages/message/message')">
						<image src="../../static/m1.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">最新消息</view>
					</view>
					<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"
						@click="scan">
						<image src="../../static/m2.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">马上下载</view>
					</view>
					<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"
						@click="go('/pages/member/discount', true)">
						<image src="../../static/m3.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">88优惠</view>
					</view>
					<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"
						@click="go('/pages/member/download/download', false)">
						<image src="../../static/m4.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">影片库</view>
					</view>
					<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"
						@click="$u.route('/pages/shop/cate')">
						<image src="../../static/m5.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">商城</view>
					</view>
				
					<button open-type="contact" :plain="true" class="u-flex-xy-center u-p-r" style="flex-direction: column;margin: 0;padding: 0;border: none;">
						<image src="../../static/m6.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">在线客服</view>
					</button>
				</view>
			</view>
			
		</view>
		<u-popup :show="showQrcode" @close="showQrcode=false" mode="center">
			<!-- 234 -->
			<image :src="user.qrcode_image" style="width: 200rpx;height: 200rpx;"></image>
		</u-popup>
	</view>
</template>


<script>

	export default {
		
		data() {
			return {
				user: {},
				showQrcode:false
				
			}
		},
		onLoad() {
	

		},
		async onShow() {
			const isLogin = getApp().checkLogin(false, false)
			if (isLogin) {
				this.getUser()
			}
		},
		
		methods: {
			go(url, checkLogin) {
				if (checkLogin) {
					const isLogin = getApp().checkLogin(true, false)
					if (!isLogin) return
				}
				uni.navigateTo({
					url,
				})
			},
			scan(){
				const isLogin = getApp().checkLogin(true, false)
				if (!isLogin) return
				uni.scanCode({
					success(e) {
						
					}
				})
			},
			async getUser() {
				let res = await uni.$u.http.post('user/index',{project_id:uni.getStorageSync('project_id')});
				this.user = res
		
				uni.setStorageSync('userInfo', res)
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #FFFFFF;
	}
	.bei {
		width: 100%;
		height: 560rpx;
	
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	
		.grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-gap: 40rpx;
		}
	.login {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255,255 ,255, .8);
		z-index: 1;
		border-radius: 10px;
		text {
			color: #AC0800;
		}
	}
</style>